<template>
  <view v-if="goodsDetail.goods_price">
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in goodsDetail.pics" :key="index" @click="lookBigImg(index)">
        <image :src="item.pics_big" mode=""></image>
      </swiper-item>
    </swiper>
    <view class="goods_detail">
      <text>￥{{goodsDetail.goods_price}}</text>
      <view class="goods_name">
        <view class="goods_title">
          {{goodsDetail.goods_name}}
        </view>
        <view class="goods_shoucang">
          <uni-icons type="star" size="25" color="gray"></uni-icons>
          <text>收藏</text>
        </view>
        
      </view>
      <text>快递:免运费</text>
      <view class="goods_Img">
      <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
      </view>
    </view>
    <view class="uni-container">

    		<view class="goods-carts">
    			<uni-goods-nav :options="options" :fill="true" :button-group="customButtonGroup" @click="onClick"
    				@buttonClick="buttonClick" />
    		</view>
    
    	</view>
  </view>
</template>

<script>
  import {mapMutations,mapState,mapGetters} from "vuex"
  export default {
    data() {
      return {
        goodsDetail:{},
        options: [ {
        					icon: 'shop',
        					text: '店铺',
        				}, {
        					icon: 'cart',
        					text: '购物车',
        					info: 0
        				}],
                customButtonGroup: [{
                						text: '加入购物车',
                						backgroundColor: '#fd0002',
                						color: '#fff'
                					},
                					{
                						text: '立即购买',
                						backgroundColor: '#fea304',
                						color: '#fff'
                					}
                				],
      };
    },
    onLoad(options) {
      this.getGoodsDetail(options.goods_id)
    },
    methods:{
      ...mapMutations('cartStore',['addToCart','saveCart']),
      async getGoodsDetail(goods_id){
        let {data:res}=await uni.$http.get('/api/public/v1/goods/detail',{goods_id})
        if(res.meta.status!==200) uni.$showMsg("商品详情获取失败！")
        res.message.goods_introduce=res.message.goods_introduce.replace(/<img/g,'<img style="display:block"')
       
        this.goodsDetail=res.message
      },
      lookBigImg(index){
        uni.previewImage({
          current:index,
          urls:this.goodsDetail.pics.map(x => x.pics_big),
          indicator:"number",
        })
      },
      
      onClick(e) {
              // index 0为店铺 1为购物车
              
      				let title=e.index
              if(title===1){
                uni.switchTab({
                  url:"/pages/cart/cart"
                })
              }else{
                // this.$store.commit('cartStore/addToCart')
              }
      			},
      			buttonClick(e) {
              // index 0为加入购物车 1为立即购买
      				let index=e.index  
      				if(index===0){
                let goods={
                   goods_id: this.goodsDetail.goods_id,       // 商品的Id
                   goods_name: this.goodsDetail.goods_name,   // 商品的名称
                   goods_price: this.goodsDetail.goods_price, // 商品的价格
                   goods_count: 1,                           // 商品的数量
                   goods_small_logo: this.goodsDetail.goods_small_logo, // 商品的图片
                   goods_state: true                         // 商品的勾选状态
                }
                this.addToCart(goods)
              }
      			}
    },
    computed: {
      ...mapGetters('cartStore',['total'])
    },
    watch:{
      total:{
          
        immediate:true,
        handler(newval){
        this.options[1].info=newval
      }
      }
    }
  }
</script>

<style lang="scss">
  .example-body {
  		padding: 0;
  		/* #ifndef APP-NVUE */
  		display: block;
  		/* #endif */
  	}
  
  	.goods-carts {
  		/* #ifndef APP-NVUE */
  		display: flex;
  		/* #endif */
  		flex-direction: column;
  		position: fixed;
  		left: 0;
  		right: 0;
  		/* #ifdef H5 */
  		left: var(--window-left);
  		right: var(--window-right);
  		/* #endif */
  		bottom: 0;
  	}
swiper{
  height: 750rpx;
  swiper-item{
    height: 100%;
    image{
      width: 100vw;
      height: 100%;
    }
  }
}
.goods_detail{
  display: flex;
  flex-direction: column;
  &>text:nth-of-type(1){
    color: #c00000;
    font-weight: bold;
    padding: 10px 10px ;
  }
  &>text:nth-of-type(2){
    color: #5a5a5a;
    font-size: 12px;
    padding: 10px 10px ;
  }
  .goods_name{
    padding: 0 10px ;
    padding-right: 0;
    display: flex;
    .goods_title{
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #333;
      padding-right:5px;
      flex: 9;
      border-right: 1px solid #ccc;
    }
    .goods_shoucang{
      flex: 1.5;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      text{
        color: #666;
        font-size: 14px;
      }
    }
  }
  .goods_Img{
    image{
      width: 100vw;
    }
  }
}
</style>
